<template>
	<view>
		<dsl-navbar title="电子协议" isBack bgTopImg="#ffffff"></dsl-navbar>
		<view class="rowsa loading  bg-white padding">
			<view v-for="(item,index) in titleList" :key='index'>
				<view :class="[{active_title:item.id == titleNum},'classify_title']">{{item.title}}</view>
				<view :class="[{classify_bottom:item.id == titleNum},'classify_heng']"></view>
			</view>
		</view>
		<view class="padding rowsb bg-white  solid-bottom" v-for="(itenkad,index) in 3" :key='index'>
			<view class="">
				协议名称
			</view>
			<view class="cuIcon-right"></view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleList: [{
						title: '待签协议',
						id: 1
					},
					{
						title: '已签协议',
						id: 2
					},
				],
				titleNum: 1, //默认选中的分类
			}
		}
	}
</script>

<style>
	page {
		background: #F7F6FA;
	}

	.classify_bottom {
		height: 6rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 3rpx;
	}

	.classify_heng {
		margin-top: 20rpx;
		height: 6rpx;
		opacity: 1;
		border-radius: 3rpx;
	}


</style>
